<template>
  <div class="solid-color">
    <div
      v-for="(item, index) in colors"
      :key="index"
      :style="{
        backgroundImage: item
      }"
      class="color-card"
      @click="setBackground(item)"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'solid-color',
  data () {
    return {
      colors: [
        'linear-gradient(0deg, rgb(161, 140, 209) 0%, rgb(251, 194, 235) 100%)',
        'linear-gradient(0deg, rgb(255, 154, 158) 0%, rgb(254, 207, 239) 99%, rgb(254, 207, 239) 100%)',
        'linear-gradient(0deg, rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%)',
        'linear-gradient(0deg, rgb(253, 203, 241) 0%, rgb(253, 203, 241) 1%, rgb(230, 222, 233) 100%)',
        'linear-gradient(120deg, rgb(161, 196, 253) 0%, rgb(194, 233, 251) 100%)',
        'linear-gradient(120deg, rgb(212, 252, 121) 0%, rgb(150, 230, 161) 100%)',
        'linear-gradient(120deg, rgb(132, 250, 176) 0%, rgb(143, 211, 244) 100%)',
        'linear-gradient(0deg, rgb(207, 217, 223) 0%, rgb(226, 235, 240) 100%)',
        'linear-gradient(120deg, rgb(166, 192, 254) 0%, rgb(246, 128, 132) 100%)',
        'linear-gradient(120deg, rgb(224, 195, 252) 0%, rgb(142, 197, 252) 100%)',
        'linear-gradient(120deg, rgb(240, 147, 251) 0%, rgb(245, 87, 108) 100%)',
        'linear-gradient(120deg, rgb(253, 251, 251) 0%, rgb(235, 237, 238) 100%)'
      ]
    }
  },
  methods: {
    setBackground (item) {
      this.$root.config.background = {
        url: item,
        type: 'color'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.solid-color {
  @include wh(100%, auto);
  @include flex(row, center, space-between);
  flex-wrap: wrap;
  background: #fff;
  overflow: auto;
  height: calc(100vh - 300px);
  .color-card {
    @include wh(calc(50% - 10px), 100px);
    margin: 5px;
  }
}
</style>
